import React, { forwardRef, useRef, useImperativeHandle } from "react";

// 子函数式组件
const HYInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(
    ref,
    () => ({
      focus: () => {
        //   console.log("我是回调的focus");
        inputRef.current.focus();
      },
    }),
    [inputRef.current]
  );
  return <input type="text" ref={inputRef} />;
});

export default function ForwardRefDemo02() {
  const inputRef = useRef();
  return (
    <div>
      <HYInput ref={inputRef} />
      <button onClick={(e) => inputRef.current.focus()}>聚焦</button>
    </div>
  );
}
